<template>
    <ul class="pai-group">
        <li class="pai-item state-now" v-for="(paiObj,index) in tomorrowPaiData.list" :key="index">
            <router-link :to="{name : 'pai-detail'}" class="item-wrap" target="_blank">
                <div class="img-wrap">
                    <!--图片未加载时显示加载图片-->
                    <img :alt="paiObj.name"
                         :src="paiObj.imgUrl">
                </div>
                <div class="item-content">
                    <p class="item-title">{{paiObj.name}}</p>
                    <p class="item-store">
                        <em>送拍机构</em>
                        <span>{{paiObj.company}}</span>
                    </p>
                    <p class="item-cur-price">
                        <em>起 拍 价</em>
                        <span class="amount">
                                        <em>¥</em>
                                        <span>{{paiObj.curPaiPrice}}</span>
                                    </span>
                    </p>

                    <p class="soon-time">
                        11月02日 08:00开拍
                    </p>

                    <div class="item-side-box item-look-box">
                        <span class="side-num">232</span>
                        <span class="side-text">次围观</span></div>
                </div>

            </router-link>
        </li>

        <!--底线-->
        <Baseline style="width: 1200px"/>
    </ul>
</template>

<script>
    import Baseline from "@/components/Baseline"

    export default {
        name: "PaimaiMore_Tomorrow",
        components : {Baseline},
        data() {
            return {
                /*明日专场拍卖商品数据*/
                tomorrowPaiData: {
                    list: [
                        {
                            id: "",/*主键*/
                            name: "平洲精品翡翠冰点低价专场",
                            company: "福州有限公司",/*拍卖机构*/
                            bidTotal: 1322,/*出价次数*/
                            curPaiPrice: 1,/*当前竞拍价*/
                            dealPrice: 83348,/*成交价*/
                            imgUrl: "https://img.alicdn.com/bao/uploaded/img.alicdn.com/bao/uploaded/https://gw.alicdn.com/tfs/TB1TdhLueuSBuNjy1XcXXcYjFXa-520-220.jpg_600x600Q90.jpg"
                        },
                        {
                            id: "",/*主键*/
                            name: "【华丽彩宝】奢华彩色宝石首饰",
                            company: "意禄珠宝有限公司",/*拍卖机构*/
                            bidTotal: 97,/*出价次数*/
                            curPaiPrice: 1,/*当前竞拍价*/
                            dealPrice: 8848,/*成交价*/
                            imgUrl: "https://img.alicdn.com/bao/uploaded/img.alicdn.com/bao/uploaded/i3/O1CN01JoAEuH24NAhWNXMgt_!!0-paimai.jpg_600x600Q90.jpg"
                        },
                        {
                            id: "",/*主键*/
                            name: "手表很多条正品第一条",
                            company: "杭州宜奢电子商务有限公司",/*拍卖机构*/
                            bidTotal: 1112,/*出价次数*/
                            curPaiPrice: 98799,/*当前竞拍价*/
                            dealPrice: 98799,/*成交价*/
                            imgUrl: "https://img.alicdn.com/bao/uploaded/img.alicdn.com/bao/uploaded/i2/O1CN01nsP7zv25dwrhPKIj7_!!0-paimai.jpg_600x600Q90.jpg"
                        },
                        {
                            id: "",/*主键*/
                            name: "手腕上的明信片 瑞士腕表特惠",
                            company: "福州表铺寄卖有限公司",/*拍卖机构*/
                            bidTotal: 162,/*出价次数*/
                            curPaiPrice: 81228,/*当前竞拍价*/
                            dealPrice: 81228,/*成交价*/
                            imgUrl: "https://img.alicdn.com/bao/uploaded/img.alicdn.com/bao/uploaded/i2/O1CN01k17nB71hsYijSOj79_!!0-paimai.jpg_600x600Q90.jpg"
                        },
                    ],
                },
            }
        },
        methods: {
        },
        mounted() {//页面加载后执行方法
        },
        beforeDestroy() {//vue实例销毁前执行方法
        },
    }
</script>

<style lang="less" scoped>
    ul.pai-group {
        background-color: #fff;
        width: 886px;
        padding: 2px;

        li.pai-item {
            margin-bottom: 20px;
            background-color: #f6f6f6;
            border: 1px solid #e6e6e6;
            height: 220px;

            a.item-wrap {
                display: block;
                text-decoration: none;

                .img-wrap {
                    background: url(//gtms02.alicdn.com/tps/i2/TB1UXltGXXXXXXhXpXXpJArGXXX-34-34.gif) no-repeat center center;
                    overflow: hidden;
                    float: left;
                    width: 520px;
                    height: 220px;
                }

                .item-content {
                    position: relative;
                    float: left;
                    width: 364px;
                    height: 220px;

                    .soon-time{
                        position: absolute;
                        bottom: 20px;
                        left: 20px;
                        font-size: 19px;
                        padding-top: 6px;
                        line-height: 20px;
                        color: #008060;
                    }

                    .item-title {
                        display: block;
                        padding-top: 20px;
                        padding-left: 20px;
                        line-height: 30px;
                        text-align: left;
                        width: 245px;
                        color: #0b0b0b;
                        font-weight: 700;
                        font-size: 22px;
                    }

                    .item-store {
                        color: #848484;
                        font-size: 14px;
                        text-align: left;
                        padding-left: 20px;
                        padding-top: 10px;
                        line-height: 25px;

                        span {
                            color: #333;
                            padding-left: 11px;
                            font-size: 14px;
                        }
                    }

                    .item-cur-price {
                        color: #848484;
                        text-align: left;
                        font-size: 14px;
                        padding-left: 20px;
                        line-height: 25px;

                        span.amount {
                            color: #333;
                            padding-left: 11px;
                            width: 150px;
                            font-weight: bolder;

                            span {
                                font-family: "Microsoft YaHei", simhei, sans-serif;
                                color: #008060;
                                display: inline;
                                font-size: 18px;
                                padding-left: 3px;
                                font-weight: 700;
                            }
                        }
                    }

                    .item-bid-box {
                        color: #f6f6ea;
                        background-color: #c11f3a;
                    }

                    .item-side-box {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 80px;
                        height: 102px;

                        .side-num {
                            position: absolute;
                            left: 0;
                            top: 15px;
                            font-family: Tahoma;
                            font-size: 24px;
                            font-weight: 700;
                            width: 80px;
                            text-align: center;
                        }

                        .side-text {
                            position: absolute;
                            left: 0;
                            bottom: 25px;
                            font-size: 14px;
                            width: 80px;
                            text-align: center;
                        }
                    }

                    .item-look-box {
                        background-color: #008060;
                        color: #f6f6ea;
                    }

                }
            }
        }

        li.pai-item:hover {
            outline: 2px solid #008060;

            .item-title {
                color: #008060 !important;
            }
        }

    }
</style>